/*笔记nav*/
body {
    background-color: #f8f8f8;
}
.web-note-book a {
    list-style: none;
    text-decoration: none;
    /*color: #0f0f0f;*/
}
.main-nav {
    padding-left:0;
    margin-bottom: 0;
    list-style: none;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    /*border: 1px solid transparent;*/
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.5);
    box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.main-nav > li{
    position: relative;
    display: block;
    border-left: #8c8c8c;
    margin-left: 1px;
}
.web-note-book .main-nav li {
    list-style-type: none;
    margin-bottom: 0;
    font-size: 1rem;
}
.web-note-book .main-nav .panel {
    background-color: transparent;
    box-shadow: none;
}
.web-note-book .main-nav .panel.selected {
    font-weight: 600;
    border-left: 1px solid #152740;
    border-radius: 0;
    margin-left: 1px;
    outline: 0;
}
.main-nav > li > a{
    position: relative;
    display: block;
    padding: 10px 15px;
}
.web-note-book .main-nav  li  a {
    font-size: 1.8rem;
    /*margin-left: -2px;*/
    /*border-left: 1px solid #ccc;*/
}
.web-note-book .main-nav  li  a.active {
    color: #152740;
    font-weight: 600!important;
}
.web-note-book .main-nav .panel.collapsed > a{
    border-left: 1px solid #ccc;
    margin-left: -1px;
}
.web-note-book .main-nav .panel.collapsed {
    border-left: 1px solid #ccc;
    /*margin-left: -1px;*/
}
.web-note-book .main-nav .panel.collapsed a {
    background: url(../images/notebook/expand-down.svg) no-repeat;
    -webkit-background-size:24px;
    background-size:24px;
    background-position: 190px 10px!important;
    width: 17em;
    margin-left: -1px;
}
.web-note-book .main-nav .panel.collapsed a.collapsed{
    background: url(../images/notebook/expand-up.svg) 100px 5px no-repeat;
    -webkit-background-size:24px;
    background-size:24px;
}
.collapse {
    display: none;
}
.web-note-book .main-nav .panel.collapsed ul {
    padding-top: 12px;
    margin-top: -14px;
}
.web-note-book .main-nav .panel.collapsed ul.collapse.in {
    border-left: 1px solid #8c8c8c;
    margin-left: -1px;
}
.web-note-book .main-nav li li {
    margin: 16px;
}
.web-note-book .main-nav li li a {
    font-size: 1.5em;
    color: #242424;
    border-left: none!important;
    font-weight: 100!important;
    background: 0 0!important;
}

/*3D轮播*/
.threeDSlide {
    width: 100%;
    height: 300px;
    position: relative;
    margin: 50px 0;
    overflow: hidden;
}
.threeDSlide ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 300px;
    transform-style: preserve-3d;
}
.threeDSlide ul li {
    width: 2%;
    height: 300px;
    float: left;
    position: relative;
    transform-style:preserve-3d;
    transition:all 1s;
}
.threeDSlide ul li span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
}

/*.threeDSlide ul li span:nth-child(1){
    background: url(../images/notebook/slide_a.jpg) no-repeat;
    transform: translateZ(150px);

}
.threeDSlide ul li span:nth-child(2){
    background: url(../images/notebook/slide_b.jpg) no-repeat;
    transform: translateY(-150px) rotateX(90deg);
}
.threeDSlide ul li span:nth-child(3){
    background: url(../images/notebook/slide_c.jpg) no-repeat;
    transform: translateZ(-150px) rotateX(180deg);
}
.threeDSlide ul li span:nth-child(4){
    background: url(../images/notebook/slide_d.jpg) no-repeat;
    transform: translateY(150px) rotateX(270deg);
}*/

.threeDSlide ul li span:nth-child(1){
    background: url(../images/notebook/slide_a.jpg) no-repeat;
    transform: translateZ(259.8076px);
}
.threeDSlide ul li span:nth-child(2){
    background: url(../images/notebook/slide_b.jpg) no-repeat;
    transform: translateY(-339px) translateZ(195px) rotateX(60deg);
}
.threeDSlide ul li span:nth-child(3){
    background: url(../images/notebook/slide_c.jpg) no-repeat;
    transform: translateY(-338px) translateZ(-194.9038px) rotateX(120deg);
}
.threeDSlide ul li span:nth-child(4){
    background: url(../images/notebook/slide_d.jpg) no-repeat;
    transform: translateZ(-259.8076px) rotateX(180deg);
}
.threeDSlide ul li span:nth-child(5){
    background: url(../images/notebook/slide_e.jpg) no-repeat;
    transform: translateY(226px) translateZ(-129.9038px) rotateX(240deg);
}
.threeDSlide ul li span:nth-child(6){
    background: url(../images/notebook/slide_g.jpg) no-repeat;
    transform: translateY(225px) translateZ(129.9038px) rotateX(300deg);
}





.threeDSlide ul li:nth-child(2) span {
    background-position: 1.5%;
}
.threeDSlide ul li:nth-child(3) span {
    background-position: 3%;
}
.threeDSlide ul li:nth-child(4) span {
    background-position: 4.5%;
}
.threeDSlide ul li:nth-child(5) span {
    background-position: 6%;
}
.threeDSlide ul li:nth-child(6) span {
    background-position: 7.5%;
}
.threeDSlide ul li:nth-child(7) span {
    background-position: 9%;
}
.threeDSlide ul li:nth-child(8) span {
    background-position: 10.5%;
}
.threeDSlide ul li:nth-child(9) span {
    background-position: 12%;
}
.threeDSlide ul li:nth-child(10) span {
    background-position: 13.5%;
}
.threeDSlide ul li:nth-child(11) span {
    background-position: 15%;
}
.threeDSlide ul li:nth-child(12) span {
    background-position: 16.5%;
}
.threeDSlide ul li:nth-child(13) span {
    background-position: 18%;
}
.threeDSlide ul li:nth-child(14) span {
    background-position: 19.5%;
}
.threeDSlide ul li:nth-child(15) span {
    background-position: 21%;
}
.threeDSlide ul li:nth-child(16) span {
    background-position: 22.5%;
}
.threeDSlide ul li:nth-child(17) span {
    background-position: 24%;
}
.threeDSlide ul li:nth-child(18) span {
    background-position: 25.5%;
}
.threeDSlide ul li:nth-child(19) span {
    background-position: 27%;
}
.threeDSlide ul li:nth-child(20) span {
    background-position: 28.5%;
}
.threeDSlide ul li:nth-child(21) span {
    background-position: 30%;
}
.threeDSlide ul li:nth-child(22) span {
    background-position: 31.5%;
}
.threeDSlide ul li:nth-child(23) span {
    background-position: 33%;
}
.threeDSlide ul li:nth-child(24) span {
    background-position: 34.5%;
}
.threeDSlide ul li:nth-child(25) span {
    background-position: 36%;
}
.threeDSlide ul li:nth-child(26) span {
    background-position: 37.5%;
}
.threeDSlide ul li:nth-child(27) span {
    background-position: 39%;
}
.threeDSlide ul li:nth-child(28) span {
    background-position: 40.5%;
}
.threeDSlide ul li:nth-child(29) span {
    background-position: 42%;
}
.threeDSlide ul li:nth-child(30) span {
    background-position: 43.5%;
}
.threeDSlide ul li:nth-child(31) span {
    background-position: 45%;
}
.threeDSlide ul li:nth-child(32) span {
    background-position: 46.5%;
}
.threeDSlide ul li:nth-child(33) span {
    background-position: 48%;
}
.threeDSlide ul li:nth-child(34) span {
    background-position: 49.5%;
}
.threeDSlide ul li:nth-child(35) span {
    background-position: 51%;
}
.threeDSlide ul li:nth-child(36) span {
    background-position: 52.5%;
}
.threeDSlide ul li:nth-child(37) span {
    background-position: 54%;
}
.threeDSlide ul li:nth-child(38) span {
    background-position: 55.5%;
}
.threeDSlide ul li:nth-child(39) span {
    background-position: 57%;
}
.threeDSlide ul li:nth-child(40) span {
    background-position: 58.5%;
}
.threeDSlide ul li:nth-child(41) span {
    background-position: 60%;
}
.threeDSlide ul li:nth-child(42) span {
    background-position: 61.5%;
}
.threeDSlide ul li:nth-child(43) span {
    background-position: 63%;
}
.threeDSlide ul li:nth-child(44) span {
    background-position: 64.5%;
}
.threeDSlide ul li:nth-child(45) span {
    background-position: 66%;
}
.threeDSlide ul li:nth-child(46) span {
    background-position: 67.5%;
}
.threeDSlide ul li:nth-child(47) span {
    background-position: 69%;
}
.threeDSlide ul li:nth-child(48) span {
    background-position: 70.5%;
}
.threeDSlide ul li:nth-child(49) span {
    background-position: 72%;
}
.threeDSlide ul li:nth-child(50) span {
    background-position: 73.5%;
}

.threeDSlide .prev, .threeDSlide .next {
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    position: absolute;
    top: 50%;
    font-size: 40px;
    color: #fff;
    text-decoration: none;
    background-color: rgba(0,0,0,.5);
    margin-top: -30px;
    display: none;
}
.threeDSlide .next {
    right: 0;
}